<template>
    <scroll-view v-if="list.length > 0" @scrolltolower="scrolltolower" class="scroll_view" scroll-y>
        <uni-swipe-action>
            <uni-swipe-action-item v-for="(ele, index) in list" :key="ele.id">
                <view class="box" @tap="look(ele, 1)">
                    <view class="history">
                        <view class="history_item">
                            <RecordItem :item="ele" />
                            <!-- <view class="handle">
                                <text style="color: red;" v-if="ele.status == 0" @tap.stop="handleDelete(ele)">删除</text>
                                <text style="color: #337ab7;" v-if="ele.status == 0" @tap.stop="look(ele, 2)">修改</text>
                                <text style="color: orange;" v-if="ele.status == 1" @tap.stop="handleRemoke(ele)">撤回</text>
                            </view> -->
                        </view>
                    </view>
                </view>
                <template v-slot:right>
                    <!-- <view v-if="ele.status != 0 && ele.status != 4 && ele.status != 3" @tap.stop="handleRemoke(ele)"
                        class="chehui">撤销</view>
                    <view v-if="ele.status == 0" @tap.stop="look(ele, 2)" class="xiugai">修改</view>
                    <view v-if="ele.status == 0" @tap.stop="handleDelete(ele)" class="shanchu">删除</view> -->
                </template>
            </uni-swipe-action-item>
        </uni-swipe-action>
        <view style="padding: 10rpx 0;">
            <view class="none" v-if="isFinish">没有更多了~</view>
            <view class="loadMore" v-if="isMore">正在加载...</view>
        </view>

    </scroll-view>
    <fl-empty v-else />
</template>
  
<script setup>
import { getReportList, revokeManage } from '@/api/http'
import RecordItem from './RecordItem.vue'
import modal from '@/plugins/modal'
import { ref, watch } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import { deleteManage } from '@/api/http'
const par = {
    pageSize: 10,
    pageNum: 1
}
const list = ref([])
const total = ref(0)
const isFinish = ref(false);
const isMore = ref(false);
const props = defineProps(['isLoad'])

watch(() => props.isLoad, () => {
    reset()
})


const getList = async () => {
    const res = await getReportList(par)
    total.value = res.total
    list.value = [...list.value, ...res.rows]
}
const look = (ele, type) => {
    let url = '/pages/reporteLook/index?type='
        + type + '&id=' + ele.id + '&status=' + ele.status
    if (ele.status == 1) {
        url += '&flag=1'
    }
    uni.navigateTo({
        url
    })
}
onLoad(() => {
    getList()
})
const reset = () => {
    par.pageNum = 1;
    list.value = [];
    isFinish.value = false;
    isMore.value = false;
    total.value = 0;
    getList()
}
const handleDelete = async (ele) => {
    const res = await modal.confirm('确定删除?')
    if (res) {
        const re = await deleteManage(ele.id)
        modal.msgSuccess('操作成功')
        reset()

    }
}
const handleRemoke = async (ele) => {
    const res = await modal.confirm(`确定撤销报备人为“${ele.reporterName}”的数据项?`)
    if (res) {
        const re = await revokeManage(ele.id)
        modal.msgSuccess('操作成功')
        reset()

    }
}
const scrolltolower = () => {
    if (par.pageNum * par.pageSize >= total.value) {
        isFinish.value = true
        isMore.value = false
        return
    }
    par.pageNum += 1
    isMore.value = true
    getList()
}
</script>
  
<style lang="scss">
.scroll_view {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #fff;

    .chehui,
    .xiugai,
    .shanchu {
        width: 140rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0d80d7;
        font-size: 28rpx;
        color: #fff;
    }

    .xiugai {
        background-color: green;
    }

    .shanchu {
        background-color: red;
    }

    .history {
        position: relative;
        width: 92%;
        margin: 0 auto;

        .history_item {
            position: relative;
            padding: 25rpx 25rpx;
            border-bottom: 2rpx solid #E7E7E7;

            // .handle {
            //     display: flex;
            //     flex-direction: column;
            //     position: absolute;
            //     height: 220rpx;
            //     align-items: center;
            //     justify-content: space-around;
            //     right: 0;
            //     top: 0;

            //     text {
            //         display: flex;
            //         text-align: center;
            //         align-items: center;
            //         flex: 1;
            //     }

            // }

        }
    }
}
</style>
  